import ReactDOM from 'react-dom'
import React, { Component, createContext } from 'react'
import Parent from './Parent.jsx'
// 创建一个上下文范围,可以给这个范围注入数据,可以在范围内任意组件消费数据
export const MyContext = createContext({})
// 根组件
class App extends Component {
  // 状态提升:由最近的父组件来管理状态和修改状态的函数,子组件通过props使用完成兄弟组件之间的通讯
  // 状态
  state = {
    money: 10000
  }
  updateMoney = (price) => {
    this.setState({
      money: this.state.money - price
    })
  }

  render() {
    return (
      // 通过value属性注入数据
      <MyContext.Provider value={{
        money: this.state.money,
        updateMoney: this.updateMoney
      }}>
        <div className='app'>
          根组件:{this.state.money}
          <hr />
          <Parent />
        </div>
      </MyContext.Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))